<template>
  <view>
    <view>
      <AtNavBar
        color="#000"
        title="NavBar 导航栏示例"
        leftText="返回"
        rightFirstIconType="bullet-list"
        rightSecondIconType="user"
      />
    </view>
    <AtButton type="primary" @click="back">返回</AtButton>
    <!--  -->
    <view class="cu-bar bg-white solid-bottom margin-top">
      <view class="action">
        <text class="cuIcon-title text-orange"></text> 标签
      </view>
    </view>
    <view class="cu-tag bg-red">嫣红</view>
    <!--  -->
    <view class="cu-bar bg-white solid-bottom margin-top">
      <view class="action">
        <text class="cuIcon-title text-orange"></text> 胶囊标签
      </view>
    </view>
    <view class="cu-capsule radius">
      <view class="cu-tag bg-brown sm">
        <text class="cuIcon-likefill"></text>
      </view>
      <view class="cu-tag line-brown sm"> 23 </view>
    </view>
    <!--  -->
    <view class="cu-bar bg-white solid-bottom margin-top">
      <view class="action">
        <text class="cuIcon-title text-orange"></text> 头像
      </view>
    </view>
    <view
      class="cu-avatar xl radius"
      style="
        background-image: url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);
      "
    >
      <view class="cu-tag badge">9</view>
    </view>
    <!--  -->
    <view class="cu-bar bg-white solid-bottom margin-top">
      <view class="action">
        <text class="cuIcon-title text-orange"></text> 背景颜色
      </view>
    </view>
    <view class="cu-bar bg-white solid-bottom">
      <view class="action">
        <text class="cuIcon-title text-blue"></text>深色背景
      </view>
    </view>
    <!--  -->
    <view class="cu-bar bg-white solid-bottom margin-top">
      <view class="action">
        <text class="cuIcon-title text-orange"></text> 文本颜色
      </view>
    </view>
    <view class="padding-sm">
      <view class="padding radius text-center shadow-blur bg-red">
        <view class="text-lg">嫣红</view>
        <view class="margin-top-sm text-Abc">red </view>
      </view>
    </view>
    <!--  -->
    <text class="lg text-gray cuIcon-close"></text>
    <!--  -->
    <view class="cu-bar bg-white solid-bottom margin-top">
      <view class="action">
        <text class="cuIcon-title text-orange"></text> 按钮
      </view>
    </view>
    <view class="padding flex flex-wrap justify-between align-center bg-white">
      <button class="cu-btn">默认</button>
      <button class="cu-btn round">圆角</button>
      <button class="cu-btn cuIcon">
        <text class="cuIcon-emojifill"></text>
      </button>
    </view>
    <!--  -->
    <view class="cu-bar bg-white margin-top">
      <view class="action">
        <text class="cuIcon-title text-blue"></text>头像组
      </view>
    </view>
    <view class="padding">
      <view class="cu-avatar-group">
        <view
          class="cu-avatar round lg"
          v-for="(item, index) in avatar"
          :key="index"
          :style="[{ backgroundImage: 'url(' + avatar[index] + ')' }]"
        ></view>
      </view>
    </view>
    <view class="cu-bar bg-white margin-top">
      <view class="action">
        <text class="cuIcon-title text-blue"></text>头像标签
      </view>
    </view>
    <view class="padding">
      <view
        class="cu-avatar round lg margin-left"
        v-for="(item, index) in avatar"
        :key="index"
        :style="[{ backgroundImage: 'url(' + avatar[index] + ')' }]"
      >
        <view
          class="cu-tag badge"
          :class="
            index % 2 == 0 ? 'cuIcon-female bg-pink' : 'cuIcon-male bg-blue'
          "
        ></view>
      </view>
    </view>
    <!--  -->
    <view class="cu-bar bg-white solid-bottom margin-top">
      <view class="action">
        <text class="cuIcon-title text-orange"></text> 进度条
      </view>
    </view>
    <view class="cu-progress round margin-top">
      <view class="bg-red" style="width: 61.8%">61.8%</view>
    </view>
    <!--  -->
    <view class="cu-bar bg-white solid-bottom margin-top">
      <view class="action">
        <text class="cuIcon-title text-orange"></text> 默认阴影
      </view>
    </view>
    <view class="padding-xl radius shadow bg-white">默认阴影</view>
    <!--  -->
    <view class="cu-bar bg-white solid-bottom margin-top">
      <view class="action">
        <text class="cuIcon-title text-orange"></text> 加载栏
      </view>
    </view>
    <view class="cu-load bg-red erro"></view>
    <!--  -->
    <AtCountdown isCard :minutes="0" :seconds="3" @time-up="onTimeUp" />
  </view>
  <!-- 菜单列表 -->
  <view class="cu-bar bg-white solid-bottom margin-top">
    <view class="action">
      <text class="cuIcon-title text-orange"></text> 菜单列表
    </view>
  </view>
  <view class="cu-list menu sm-border card-menu margin-top">
    <view class="cu-item arrow">
      <view class="content">
        <text class="cuIcon-circlefill text-grey"></text>
        <text class="text-grey">图标 + 标题</text>
      </view>
    </view>
    <view class="cu-item arrow">
      <button class="cu-btn content" open-type="contact">
        <text class="cuIcon-btn text-olive"></text>
        <text class="text-grey">Open-type 按钮</text>
      </button>
    </view>
    <view class="cu-item arrow">
      <navigator
        class="content"
        hover-class="none"
        url="../list/list"
        open-type="redirect"
      >
        <text class="cuIcon-discoverfill text-orange"></text>
        <text class="text-grey">Navigator 跳转</text>
      </navigator>
    </view>
    <view class="cu-item arrow">
      <view class="content">
        <text class="cuIcon-emojiflashfill text-pink"></text>
        <text class="text-grey">头像组</text>
      </view>
      <view class="action">
        <view class="cu-avatar-group">
          <view
            class="cu-avatar round sm"
            style="
              background-image: url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);
            "
          ></view>
          <view
            class="cu-avatar round sm"
            style="
              background-image: url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);
            "
          ></view>
          <view
            class="cu-avatar round sm"
            style="
              background-image: url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);
            "
          ></view>
          <view
            class="cu-avatar round sm"
            style="
              background-image: url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg);
            "
          ></view>
        </view>
        <text class="text-grey text-sm">4 人</text>
      </view>
    </view>
    <view class="cu-item arrow">
      <view class="content">
        <text class="cuIcon-btn text-green"></text>
        <text class="text-grey">按钮</text>
      </view>
      <view class="action">
        <button class="cu-btn round bg-green shadow">
          <text class="cuIcon-upload"></text> 上传
        </button>
      </view>
    </view>
    <view class="cu-item arrow">
      <view class="content">
        <text class="cuIcon-tagfill text-red margin-right-xs"></text>
        <text class="text-grey">标签</text>
      </view>
      <view class="action">
        <view class="cu-tag round bg-orange light">音乐</view>
        <view class="cu-tag round bg-olive light">电影</view>
        <view class="cu-tag round bg-blue light">旅行</view>
      </view>
    </view>
    <view class="cu-item arrow">
      <view class="content">
        <text class="cuIcon-warn text-green"></text>
        <text class="text-grey">文本</text>
      </view>
      <view class="action">
        <text class="text-grey text-sm">小目标还没有实现！</text>
      </view>
    </view>
    <view class="cu-item">
      <view class="content padding-tb-sm">
        <view>
          <text class="cuIcon-clothesfill text-blue margin-right-xs"></text>
          多行Item</view
        >
        <view class="text-gray text-sm">
          <text class="cuIcon-infofill margin-right-xs"></text>
          小目标还没有实现！</view
        >
      </view>
      <view class="action">
        <switch class="switch-sex checked skin"></switch>
      </view>
    </view>
  </view>
  <!--  -->
  <view>
    <view class="cu-bar bg-white solid-bottom">
      <view class="action">
        <text class="cuIcon-titles text-orange"></text> 案例类卡片
      </view>
      <view class="action">
        <switch
          :class="isCard ? 'checked' : ''"
          :checked="isCard ? true : false"
          @change="setIsCard"
        ></switch>
      </view>
    </view>
    <view class="cu-card case" :class="isCard ? 'no-card' : ''">
      <view class="cu-item shadow">
        <view class="image">
          <!-- <image
            src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
            mode="widthFix"
          ></image> -->
          <view class="cu-tag bg-blue">史诗</view>
          <view class="cu-bar bg-shadeBottom">
            <text class="text-cut"
              >我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text
            ></view
          >
        </view>
        <view class="cu-list menu-avatar">
          <view class="cu-item">
            <!-- <view
              class="cu-avatar round lg"
              style="
                background-image: url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);
              "
            ></view> -->
            <view class="content flex-sub">
              <view class="text-grey">正义天使 凯尔</view>
              <view class="text-gray text-sm flex justify-between">
                十天前
                <view class="text-gray text-sm">
                  <text class="cuIcon-attentionfill margin-lr-xs"></text> 10
                  <text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
                  <text class="cuIcon-messagefill margin-lr-xs"></text> 30
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view
      class="cu-bar bg-white solid-bottom"
      :class="isCard ? 'margin-top' : ''"
    >
      <view class="action">
        <text class="cuIcon-titles text-orange"></text> 动态类卡片
      </view>
      <view class="action">
        <switch
          :class="isCard ? 'checked' : ''"
          :checked="isCard ? true : false"
          @change="setIsCard"
        ></switch>
      </view>
    </view>
    <view class="cu-card dynamic" :class="isCard ? 'no-card' : ''">
      <view class="cu-item shadow">
        <view class="cu-list menu-avatar">
          <view class="cu-item">
            <!-- <view
              class="cu-avatar round lg"
              style="
                background-image: url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);
              "
            ></view> -->
            <view class="content flex-sub">
              <view>凯尔</view>
              <view class="text-gray text-sm flex justify-between">
                2019年12月3日
              </view>
            </view>
          </view>
        </view>
        <view class="text-content">
          折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！
        </view>
        <view
          class="grid flex-sub padding-lr"
          :class="isCard ? 'col-3 grid-square' : 'col-1'"
        >
          <view
            class="bg-img"
            :class="isCard ? '' : 'only-img'"
            style="
              background-image: url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);
            "
            v-for="(item, index) in isCard ? 9 : 1"
            :key="index"
          >
          </view>
        </view>
        <view class="text-gray text-sm text-right padding">
          <text class="cuIcon-attentionfill margin-lr-xs"></text> 10
          <text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
          <text class="cuIcon-messagefill margin-lr-xs"></text> 30
        </view>

        <view class="cu-list menu-avatar comment solids-top">
          <view class="cu-item">
            <!-- <view
              class="cu-avatar round"
              style="
                background-image: url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);
              "
            ></view> -->
            <view class="content">
              <view class="text-grey">莫甘娜</view>
              <view class="text-gray text-content text-df">
                凯尔，你被自己的光芒变的盲目。
              </view>
              <view class="bg-grey padding-sm radius margin-top-sm text-sm">
                <view class="flex">
                  <view>凯尔：</view>
                  <view class="flex-sub">妹妹，你在帮他们给黑暗找借口吗?</view>
                </view>
              </view>
              <view class="margin-top-sm flex justify-between">
                <view class="text-gray text-df">2018年12月4日</view>
                <view>
                  <text class="cuIcon-appreciatefill text-red"></text>
                  <text
                    class="cuIcon-messagefill text-gray margin-left-sm"
                  ></text>
                </view>
              </view>
            </view>
          </view>

          <view class="cu-item">
            <!-- <view
              class="cu-avatar round"
              style="
                background-image: url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);
              "
            ></view> -->
            <view class="content">
              <view class="text-grey">凯尔</view>
              <view class="text-gray text-content text-df">
                妹妹，如果不是为了飞翔，我们要这翅膀有什么用?
              </view>
              <view class="bg-grey padding-sm radius margin-top-sm text-sm">
                <view class="flex">
                  <view>莫甘娜：</view>
                  <view class="flex-sub"
                    >如果不能立足于大地，要这双脚又有何用?</view
                  >
                </view>
              </view>
              <view class="margin-top-sm flex justify-between">
                <view class="text-gray text-df">2018年12月4日</view>
                <view>
                  <text class="cuIcon-appreciate text-gray"></text>
                  <text
                    class="cuIcon-messagefill text-gray margin-left-sm"
                  ></text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="cu-bar bg-white solid-bottom margin-top">
      <view class="action">
        <text class="cuIcon-titles text-orange"></text> 文章类卡片
      </view>
      <view class="action">
        <switch
          :class="isCard ? 'checked' : ''"
          :checked="isCard ? true : false"
          @change="setIsCard"
        ></switch>
      </view>
    </view>
    <view class="cu-card article" :class="isCard ? 'no-card' : ''">
      <view class="cu-item shadow">
        <view class="title"
          ><view class="text-cut"
            >无意者
            烈火焚身;以正义的烈火拔出黑暗。我有自己的正义，见证至高的烈火吧。</view
          ></view
        >
        <view class="content">
          <!-- <image
            src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
            mode="aspectFill"
          ></image> -->
          <view class="desc">
            <view class="text-content">
              折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！真正的恩典因不完整而美丽，因情感而真诚，因脆弱而自由！</view
            >
            <view>
              <view class="cu-tag bg-red light sm round">正义天使</view>
              <view class="cu-tag bg-green light sm round">史诗</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 表单 -->
  <view class="cu-bar bg-white solid-bottom margin-top">
    <view class="action">
      <text class="cuIcon-title text-orange"></text> 表单
    </view>
  </view>
  <view class="cu-form-group margin-top">
    <view class="title">邮件</view>
    <input placeholder="两字短标题" name="input" />
  </view>
  <view class="cu-form-group">
    <view class="title">输入框</view>
    <input placeholder="三字标题" name="input" />
  </view>
  <view class="cu-form-group">
    <view class="title">收货地址</view>
    <input placeholder="统一标题的宽度" name="input" />
  </view>
  <view class="cu-form-group">
    <view class="title">收货地址</view>
    <input placeholder="输入框带个图标" name="input" />
    <text class="cuIcon-locationfill text-orange"></text>
  </view>
  <view class="cu-form-group">
    <view class="title">验证码</view>
    <input placeholder="输入框带个按钮" name="input" />
    <button class="cu-btn bg-green shadow" style="width: 72px">验证码</button>
  </view>
  <view class="cu-form-group">
    <view class="title">手机号码</view>
    <input placeholder="输入框带标签" name="input" />
    <view class="cu-capsule radius">
      <view class="cu-tag bg-blue"> +86 </view>
      <view class="cu-tag line-blue"> 中国大陆 </view>
    </view>
  </view>
  <view class="cu-timeline">
    <view class="cu-time"> 2020 </view>
    <view class="cu-item">
      <view class="content">第一个</view>
    </view>
    <view class="cu-time"> 2019 </view>
    <view class="cu-item">
      <view class="content">第二个</view>
    </view>
  </view>
  <!-- chat -->
  <view class="cu-bar bg-white solid-bottom margin-top">
    <view class="action">
      <text class="cuIcon-title text-orange"></text> 聊天
    </view>
  </view>
  <view class="cu-chat">
    <view class="cu-info">djangson</view>
    <view class="cu-item">
      <view class="cu-avatar">姜</view>
      <view class="main">
        <view class="content">我是聊天记录</view>
      </view>
      <view class="date">12:00</view>
      <view class="action"><text class="cuIcon-locationfill"></text></view>
    </view>
  </view>
  <!-- divider -->
  <view class="cu-bar bg-white solid-bottom margin-top">
    <view class="action">
      <text class="cuIcon-title text-orange"></text> 分割线
    </view>
  </view>
  <view class="cu-divider"></view>
  <view class="cu-divider"></view>
  <!--  -->
  <view class="cu-bar bg-white solid-bottom margin-top">
    <view class="action">
      <text class="cuIcon-title text-orange"></text> 底栏
    </view>
  </view>
  <view class="box">
    <view class="cu-bar bg-white tabbar border shop">
      <view class="action" open-type="contact">
        <view class="cuIcon-service text-green">
          <view class="cu-tag badge">1</view>
        </view>
        客服
      </view>
      <view class="action">
        <view class="cuIcon-cart">
          <view class="cu-tag badge">99</view>
        </view>
        购物车
      </view>
      <view class="bg-orange submit">加入购物车</view>
      <view class="bg-red submit">立即订购</view>
    </view>
  </view>
</template>
<script lang="ts">
import './index.scss'
import { AtNavBar, AtButton, AtCountdown } from 'taro-ui-vue3/lib'
import { defineComponent, reactive, ref } from 'vue'
import Taro from '@tarojs/taro'
export default defineComponent({
  components: {
    AtNavBar,
    AtButton,
    AtCountdown,
  },
  setup() {
    const avatar = reactive([
      'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
      'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
      'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
      'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg',
    ])

    const isCard = ref(false)

    const setIsCard = (e) => {
      console.log(e)
      isCard.value = e.detail.value
    }

    const onTimeUp = () => {
      Taro.showToast({
        title: '时间到',
        icon: 'success',
        duration: 2000,
      })
    }

    const back = () => {
      Taro.navigateBack()
    }

    return {
      back,
      isCard,
      setIsCard,
      avatar,
      onTimeUp,
    }
  },
})
</script>
